{% extends 'base.html' %}

{% block content %}
<div class="row mb-4">
    <div class="col-md-12">
        <h1>AI 解决方案建议</h1>
        <p>问题: <a href="{{ url_for('main.view_issue', issue_id=issue.id) }}">#{{ issue.id }} {{ issue.title }}</a></p>
    </div>
</div>

<div class="row">
    <div class="col-md-8">
        <!-- 解决方案建议 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5>推荐解决方案</h5>
            </div>
            <div class="card-body">
                {% if solutions %}
                    <div class="list-group">
                        {% for solution in solutions %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between">
                                <small class="text-muted">{{ solution.source }}</small>
                                <span class="badge badge-primary">置信度: {{ (solution.confidence * 100)|int }}%</span>
                            </div>
                            <p class="mt-2">{{ solution.text }}</p>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        没有找到相关解决方案建议。
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- 关键见解 -->
        <div class="card mb-4">
            <div class="card-header bg-info text-white">
                <h5>关键见解</h5>
            </div>
            <div class="card-body">
                {% if insights %}
                    <div class="list-group">
                        {% for insight in insights %}
                        <div class="list-group-item">
                            <div class="d-flex justify-content-between">
                                {% if insight.source %}
                                <small class="text-muted">{{ insight.source }}</small>
                                {% endif %}
                                <span class="badge badge-info">重要性: {{ (insight.importance * 100)|int }}%</span>
                            </div>
                            <p class="mt-2">{{ insight.text }}</p>
                        </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        没有提取到关键见解。
                    </div>
                {% endif %}
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <!-- 相关问题 -->
        <div class="card mb-4">
            <div class="card-header bg-secondary text-white">
                <h5>相关问题</h5>
            </div>
            <div class="card-body">
                {% if relevant_issues %}
                    <div class="list-group">
                        {% for score, related_issue in relevant_issues %}
                        <a href="{{ url_for('main.view_issue', issue_id=related_issue.id) }}" class="list-group-item list-group-item-action">
                            <div class="d-flex justify-content-between">
                                <h6 class="mb-1">#{{ related_issue.id }} {{ related_issue.title }}</h6>
                                <span class="badge badge-primary">相关度: {{ (score * 10)|int }}%</span>
                            </div>
                            <p class="mb-1 text-sm text-muted">{{ related_issue.description[:80] }}...</p>
                            <div class="d-flex justify-content-between text-xs">
                                <span class="badge badge-secondary">状态: {{ related_issue.status === 'open' ? '未解决' : '已解决' }}</span>
                                <span class="badge badge-{{ related_issue.priority === 'urgent' ? 'danger' : related_issue.priority === 'high' ? 'warning' : related_issue.priority === 'medium' ? 'info' : 'secondary' }}">优先级: {{ related_issue.priority === 'low' ? '低' : related_issue.priority === 'medium' ? '中' : related_issue.priority === 'high' ? '高' : '紧急' }}</span>
                            </div>
                        </a>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="alert alert-info">
                        没有找到相关问题。
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- 问题基本信息 -->
        <div class="card">
            <div class="card-header">
                <h5>问题信息</h5>
            </div>
            <div class="card-body">
                <ul class="list-unstyled">
                    <li class="mb-2"><strong>状态:</strong> <span class="badge badge-{{ issue.status === 'open' ? 'warning' : 'success' }}">{{ issue.status === 'open' ? '未解决' : '已解决' }}</span></li>
                    <li class="mb-2"><strong>优先级:</strong> <span class="badge badge-{{ issue.priority === 'urgent' ? 'danger' : issue.priority === 'high' ? 'warning' : issue.priority === 'medium' ? 'info' : 'secondary' }}">{{ issue.priority === 'low' ? '低' : issue.priority === 'medium' ? '中' : issue.priority === 'high' ? '高' : '紧急' }}</span></li>
                    <li class="mb-2"><strong>分类:</strong> {{ issue.category }}</li>
                    <li class="mb-2"><strong>创建者:</strong> {{ issue.created_by_user.username }}</li>
                    <li class="mb-2"><strong>创建时间:</strong> {{ issue.created_at.strftime('%Y-%m-%d %H:%M') }}</li>
                    {% if issue.due_date %}
                    <li class="mb-2"><strong>截止日期:</strong> {{ issue.due_date.strftime('%Y-%m-%d') }}</li>
                    {% endif %}
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    // 添加平滑滚动效果
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
        anchor.addEventListener('click', function (e) {
            e.preventDefault();
            document.querySelector(this.getAttribute('href')).scrollIntoView({
                behavior: 'smooth'
            });
        });
    });
    
    // 如果有文件，可以添加预览功能
    if (typeof FileReader !== 'undefined') {
        $('.preview-file').on('change', function() {
            const input = this;
            if (input.files && input.files[0]) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    $('#preview-container').html(`<img src="${e.target.result}" class="img-fluid" />`);
                }
                reader.readAsDataURL(input.files[0]);
            }
        });
    }
});
</script>
{% endblock %}